<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <go-back v-show="!hideHeader" :white="true"></go-back>
          <div class="main">
            <ul class="workList">
              <li class="singleJob" v-for="(item, index) of jobList" :key="index" @click="handleClickJobItem(item.job_title)">
                <div class="jobName">{{ item.job_title }}</div>
                <div class="imgIcon">
                  <i></i>
                </div>
              </li>
            </ul>
          </div>
          <div style="width: 100%;height: 1rem;"></div>
        </div>
      </scroller>
    </div>
  </div> 
</template>

<script>
import goBack from '~/components/goBack'
import ls from 'store2'
export default {
  components: {
    goBack,
  },
  created() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true      
    }
  },
  mounted() {
    this.$visit('MajorRelationJobList')
    this.jobList = ls.get('workMsg')
    if (ls.get('majorDetailQueryData')) {
      this.preurl = '/professional/detail'
      this.backQueryData = ls.get('majorDetailQueryData')
    }
  },
  data() {
    return {
      preurl: ls.get('preUrl'),
      backQueryData: ls.get('majorDetailQueryData'),
      jobList: [],
      hideHeader: false
    }
  },
  methods: {
    handleClickJobItem(title) {
      ls.set('preUrl', this.$route.path)
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.replace({
          path: '/professional/jobDetail',
          query: {
            type: title,
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        this.goto('/professional/jobDetail', title);
      }
    },
    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    background: #fff;
    .main {
      padding: 0 0.32rem;
      .workList {
        padding-left: 0;
        list-style: none;
        .singleJob {
          height: 1.12rem;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #E5E8ED;
          .jobName {
            color: #222;
            font-size: 0.3rem;
            line-height: 0.42rem;
          }
          .imgIcon {
            width: 0.4rem;
            height: 0.4rem;
            i {
              width: 100%;
              height: 100%;
              display: inline-block;
              background: url('~@/static/sprite/icon_sprites_40.png') -1.3rem -0.7rem;
              background-size:3rem 2.4rem;
            }
          }
        }
      }
    }
  }  
</style>